import React, {useEffect, useState} from 'react';
import { Col } from 'antd';
import '../index.less'
import Pies from './pie'

export default function spread(props) {
  const [spreadData, setSpreadData] = useState({});
  useEffect(() => {
    if (Object.keys(props.data).length) {
      const datas = reastData(props.data);
      setSpreadData(datas);
    }
  }, [props.data]);
  const labeOptions = {
    show: false, // 是否显示文字
    fontSize: '14',
  }
  // 下载
  function downFile () {
    props.downFile && props.downFile(props.requestParam, 'd4');
  };
  function reastData(data) {
    if (data.source.value.length > 5) {
      data.source.value = getNewList(data.source);
    }
    if (data.classify.value.length > 5) {
      data.classify.value = getNewList(data.classify);
    }
    if (data.status.value.length > 5) {
      data.status.value = getNewList(data.status);
    }
    return data
  };
  // 获取新数据
   function getNewList(data) {
    const totals = data.count
    const newList = data.value.splice(0, 5);
    const nums = newList.reduce((pre, next) => {
      return pre + next.value
    }, 0);
    newList.push({
      key: '其他',
      name: '其他',
      value: totals - nums
    })
    return newList
  };
  return (
    <>
      <div className='title-dash-boxs'>
        <p>案件分析</p>
        <div className='title-dash-children'>
           {!props.isDisable ? <p onClick={downFile}>下载数据</p> : (<>{''}</>)}
        </div>
      </div>
      <div className='spread-boxs'>
        <Col key={1} span={8}>   
           <Pies 
             labelOption={labeOptions}
             isLegend={true}
             data={(Object.keys(spreadData).length && spreadData.source.value) || []} 
             title='案件来源'
             ></Pies>
        </Col>
        <Col key={2} span={8}>   
           <Pies 
             labelOption={labeOptions}
             isLegend={true}
             data={(Object.keys(spreadData).length && spreadData.classify.value) || []} 
             title='案件分类'
             ></Pies>
        </Col>
        <Col key={3} span={8}>   
           <Pies 
             labelOption={labeOptions}
             isLegend={true}
             data={(Object.keys(spreadData).length && spreadData.status.value) || []} 
             title='案件状态'
             ></Pies>
        </Col>
      </div>
    </>
  )
}